<template>
    <el-dialog title="作废记录" :visible.sync="dialogForm" width="1100px">
        <base-list ref="voidForm" :condition="condition" :datas.sync="voidForm" :pageSearch="pageSearch">
            <el-form :inline="true" :model="condition" class="search-form" slot="search" label-width="90px">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="作业目的">
                            <!--<auto-search-dic @selectName="v=>condition['search_EQ_jobPurpose']=v" :name="condition['search_EQ_jobPurpose']" code="COMMAND_ZYMD"></auto-search-dic>-->
                            <el-select v-model="condition['search_EQ_jobPurpose']" placeholder="请选择" clearable>
                                <el-option v-for="[key, val] in _dictJobPurpose" :key="key" :label="val" :value="key">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="作废时间起">
                            <el-date-picker v-model="condition['search_GTE_voidTime']" :picker-options="startPickerOptions" type="date" placeholder="起始日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="作废时间止">
                            <el-date-picker v-model="condition['search_LTE_voidTime']" @change="handleChangeEnd" :picker-options="endPickerOptions" type="date" placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="箱号">
                            <el-input v-model="condition['search_LIKE_containerNo']"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-button type="primary" icon="el-icon-search" @click="loadData" class="ml-100">查 询</el-button>
                    </el-col>
                </el-row>
            </el-form>
            <el-table slot="list" :data="voidForm" border stripe max-height="500">
                <el-table-column fixed="left" type="index" label="序号" width="55"></el-table-column>
                <el-table-column prop="jobPurpose" label="作业目的"  min-width="120">
                    <template slot-scope='scope'>
                        {{ scope.row.jobPurpose | _filterJobPurpose }}
                    </template>
                </el-table-column>
                <el-table-column prop="voidBy" label="作废人"  min-width="100"></el-table-column>
                <el-table-column prop="voidTime" label="作废时间"  min-width="160"></el-table-column>
                <el-table-column prop="containerNo" label="箱号"  min-width="140"></el-table-column>
                <el-table-column label="到/发站"  min-width="120">
                    <template slot-scope="scope">
                        {{ scope.row.stratStationName || scope.row.endStationName }}
                    </template>
                </el-table-column>
                <el-table-column prop="presentField" label="现场位"  min-width="120"></el-table-column>
                <el-table-column prop="purposeField" label="目的场位"  min-width="120"></el-table-column>
                <el-table-column prop="presentMachine" label="现机械"  min-width="120"></el-table-column>
                <el-table-column prop="purposeMachine" label="目的机械"  min-width="120"></el-table-column>
                <el-table-column prop="carNo" label="拖车号"  min-width="120"></el-table-column>
                <el-table-column prop="releaseTime" label="发送时间"  min-width="160"></el-table-column>
                <el-table-column prop="containerType" label="箱型"  min-width="75"></el-table-column>
                <el-table-column prop="containerSize" label="尺寸"  min-width="75"></el-table-column>
                <el-table-column prop="ifHeavy" label="空重"  min-width="75">
                    <template slot-scope="scope">
                        {{ scope.row.ifHeavy | _filterIfHeavyType }}
                    </template>
                </el-table-column>
                <el-table-column prop="tradeType" label="内外贸"  min-width="100">
                    <template slot-scope="scope">
                        {{ scope.row.tradeType | _filterTradeType }}
                    </template>
                </el-table-column>
                <el-table-column prop="cargoName" label="货名"  min-width="75"></el-table-column>
                <el-table-column prop="cargoWeight" label="货重"  min-width="75"></el-table-column>
            </el-table>
        </base-list>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="closeForm">关 闭</el-button>
        </div>
    </el-dialog>
</template>

<script>
import { getObsoleteRecord } from "@/api/middleControl/middleControl";
import autoSearchDic from "@/components/autocomplete/autoSearchDic";
export default {
    components: { autoSearchDic },
    data() {
        return {
            dialogForm: false,
            voidForm: [],
            condition: {},
            pageSearch: getObsoleteRecord
        };
    },
    methods: {
        loadData() {
            this.$refs.voidForm.loadData();
        },
        closeForm() {
            this.dialogForm = false;
            this.condition = {};
        },
        handleChangeEnd(val) {
            console.log(val);
            let setVal = val;
            if (val) {
                setVal = val.split(" ")[0] + " 23:59:59";
            }
            this.condition["search_LTE_voidTime"] = setVal;
        }
    },
    computed: {
        startPickerOptions() {
            let endDate = this.condition["search_LTE_voidTime"];
            return {
                disabledDate(time) {
                    if (endDate) {
                        return time.getTime() > new Date(endDate).getTime();
                    } else {
                        return false;
                    }
                }
            };
        },
        endPickerOptions() {
            let startDate = this.condition["search_GTE_voidTime"];
            return {
                disabledDate(time) {
                    if (startDate) {
                        return time.getTime() < new Date(startDate).getTime();
                    } else {
                        return false;
                    }
                }
            };
        }
    },

};
</script>

<style>
</style>
